<template>
  <div id="classification">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>分类管理</span>
      </div>
      <el-row :gutter="5">
        <el-col :span="1.5">
          <el-button @click="open()" plain type="primary" size="small" icon="el-icon-search">增加</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button @click="open(...checkboxall)" :disabled="checkboxall.length != 1" plain type="success" size="small"
            icon="el-icon-search">修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button @click="delClass()" :disabled="checkboxall.length == 0" plain type="danger" size="small"
            icon="el-icon-search">删除</el-button>
        </el-col>
      </el-row>
      <el-table @selection-change="handleSelectionChange" height="80%" :data="tableData"
        style="width: 100%;margin: 30px 0;">
        <el-table-column align="center" type="index" label="序号" />
        <el-table-column align="center" type="selection" />
        <el-table-column align="center" label="分类图标">
          <template slot-scope="scope">
            <el-upload class="avatar-uploader" action="#" :http-request="e => httpRequest(e, scope.row)"
              :show-file-list="false">
              <img v-if="scope.row.icon" :src="scope.row.icon" class="avatar">
              <i @click.stop="closeIcon(scope.row.class_id)" v-if="scope.row.icon" class="x el-icon-circle-close"></i>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip align="center" prop="classname" label="分类名称" />
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <el-switch :active-value="0" :inactive-value="1" @change="switch_value(scope.row)"
              v-model="scope.row.is_delete">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column :width="200" align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="open(scope.row)" size="small" type="primary" icon="el-icon-edit">修改</el-button>
            <el-button @click="delClass(scope.row.class_id)" size="small" type="danger"
              icon="el-icon-delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination style="text-align: center; margin-top: 20px;" @size-change="sizeChange"
        @current-change="currentChange" :current-page="pagination.pagenum" :page-sizes="pagination.pageSizes"
        :page-size="pagination.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
      </el-pagination>

      <!-- 增加 -->

    </el-card>
  </div>
</template>

<script>
import { getClass, setClass, addClass, delClass } from "@/api/index";
export default {
  name: 'classification',
  data() {
    return {
      tableData: [],
      pagination: {
        pageSizes: [2, 4, 6, 8, 10],
        pagesize: 2,
        pagenum: 1,
        total: 0,
      },
      checkboxall: [],
    }
  },
  mounted() {
    this.getClass();
  },
  methods: {
    //获取分类
    getClass() {
      let query = {
        type: 1,
        pagesize: this.pagination.pagesize,
        pagenum: this.pagination.pagenum,
      }
      getClass(query).then(res => {
        if (res.data.status) {
          this.tableData = res.data.results
          this.pagination.total = res.data.total
        } else {
          this.$message.error('错误')
        }
      })
    },
    //开关回调
    switch_value(row) {
      //通过id修改状态
      let data = {
        class_id: row.class_id,
        is_delete: row.is_delete
      }
      setClass(data).then((res) => {
        if (res.data.status == 0) {
          this.$message.error(res.data.message);
          row.is_delete = !row.is_delete
        }
      })
    },
    //选中回调
    handleSelectionChange(val) {
      this.checkboxall = val;
    },
    //增加修改
    open(row) {
      if (row) {
        this.$prompt('请输入分类名称', '修改分类', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPlaceholder: row.classname
        }).then(({ value }) => {
          if (!value) return this.$message.error("请正确输入")
          setClass({ class_id: row.class_id, classname: value }).then(res => {
            if (res.data.status) {
              this.$message.success("成功");
              this.getClass();
            } else {
              this.$message.error("失败")
            }
          })
        }).catch(() => {

        });
      } else {
        this.$prompt('请输入分类名称', '增加分类', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          if (!value) return this.$message.error("请正确输入")
          addClass({ classname: value }).then(res => {
            if (res.data.status) {
              this.$message.success("成功");
              this.getClass();
            } else {
              this.$message.error("失败")
            }
          })
        }).catch(() => {

        });
      }
      this.getClass();
    },
    //删除
    delClass(id) {
      let data = this.checkboxall.map((item, index) => {
        return item.class_id
      })
      delClass({ list: id != undefined ? [id] : data }).then((res) => {
        if (res.data.status) {
          this.$message.success("成功");
          this.pagination.pagenum = 1
          this.getClass();
        } else {
          this.$message.error(res.data)
        }
      })
      this.getClass();
    },
    //修改pagesize
    sizeChange(e) {
      this.pagination.pagesize = e;
      this.getClass();
    },
    //修改pagenum
    currentChange(e) {
      this.pagination.pagenum = e;
      this.getClass();
    },
    //上传图片
    httpRequest(e, row) {
      let res = !e.file ? e.target.files[0] : e.file; //兼容原生和element 上传
      let reader = new FileReader()
      reader.readAsDataURL(res)
      reader.onload = () => {//加载完立即触发
        let data = {
          class_id: row.class_id,
          icon: reader.result
        }
        setClass(data).then((res) => {
          if (res.data.status) {
            this.getClass();
          } else {
            this.$message.error(res.data.message);
          }
        })
      }
    },
    // 清空图片
    closeIcon(class_id) {
      let data = {
        class_id: class_id,
        icon: null
      }
      setClass(data).then((res) => {
        if (res.data.status) {
          this.getClass();
        } else {
          this.$message.error(res.data.message);
        }
      })
    }
  }
}
</script>

<style lang="less" src="./index.less" scoped></style>